<template>
  <view>
    <!-- #ifdef MP || APP-->
    <nav-bar navTitle="积分商城" iconColor="#ffffff" :isBackgroundColor="false"
             backgroundColor="linear-gradient( 90deg, #8B4513 0%, #FF7931 100%)"></nav-bar>
    <!-- #endif -->
    <view class="header">
      <view class="headerBg" :style="{'background-image': `url(${urlDomain}crmebimage/presets/points_bg.png)`}">
        <view class="pictrue"></view>
        <view class="num">当前积分{{ integral }}</view>
      </view>
      <navigator hover-class='none' url='/pages/goods/order_list/index?secondType=1'
                 class="record acea-row row-center-wrapper">兑换记录
      </navigator>
    </view>
    <view class="points-nav">
      <view class="nav acea-row row-middle row-around borRadius14">
        <navigator hover-class='none' url='/pages/merchant/user_integral/index' class="item">
          <view class="pictrue">
            <image :src="`${urlDomain}crmebimage/presets/points_my.png`"></image>
          </view>
          <view>我的积分</view>
        </navigator>
        <view class="line"></view>
        <navigator hover-class='none' url='/pages/merchant/user_sgin/index' class="item">
          <view class="pictrue">
            <image :src="`${urlDomain}crmebimage/presets/points_qiandao.png`"></image>
          </view>
          <view>每日签到</view>
        </navigator>
        <view class="line"></view>
        <navigator hover-class='none' open-type='switchTab' url='/pages/index/index' class="item">
          <view class="pictrue">
            <image :src="`${urlDomain}crmebimage/presets/points_goods.png`"></image>
          </view>
          <view>购买商品</view>
        </navigator>
      </view>
    </view>
    <view class="hot borRadius14" v-if="goodList.length">
      <view class="flex-between-center">
        <view class="title">热门推荐</view>
        <navigator v-show="goodList.length > 10 " hover-class='none' url='/pages/activity/goods_points/index'
                   class="item">
          <view class="text-666 f-s-26 mr28 flex-center">
            更多
            <text class="iconfont icon-xiangyou"></text>
          </view>
        </navigator>
      </view>
      <scroll-view scroll-x="true" class="scroll">
        <PointsGoods :integralGood="goodList" :pointsGoodsStyle="hotPointsStyle" :isShowSamll="true">
        </PointsGoods>
      </scroll-view>
    </view>
    <view class="body">
      <view class="body-title flex">
        <view class="scroll" @click="navTap(0,0)">
          <text class="item" :class="0 == current?'on':''">全部</text>
        </view>
        <scroll-view scroll-x="true" class="scroll" style="width: 81%;">
          <view class="item" :class="index+1 == current ?'on':''" v-for="(item, index) in navList"
                :key="index" @click="navTap(item.id,index+1)">{{ item.value }}{{ index + 1 ? '积分' : '' }}
          </view>
        </scroll-view>
      </view>
      <view class="product-list" v-if="integralGood.length">
        <PointsGoods :integralGood="integralGood" :pointsGoodsStyle="pointsStyle"></PointsGoods>
      </view>
      <view v-else-if="!loading" class="empty-box">
        <emptyPage title="暂无商品，去看看别的吧～" mTop="0" :imgSrc="urlDomain+'crmebimage/presets/noShopper.png'">
        </emptyPage>
      </view>
      <view v-if="loading" class='loadingicon acea-row row-center-wrapper' :hidden='loading==false'>
        <text class='loading iconfont icon-jiazai'></text>
      </view>

    </view>
  </view>
</template>

<script>
import {
  pointsStyle,
  hotPointsStyle
} from "./default";

let sysHeight = uni.getSystemInfoSync().statusBarHeight;
import {
  toLogin
} from '@/libs/login.js';
import {
  mapGetters
} from 'vuex';
import {
  integralProductHotApi,
  integralCategoryApi,
  integralListApi
} from '@/api/activity.js'
import emptyPage from '@/components/emptyPage.vue';
import NavBar from "@/components/navBar.vue"
import useActivity from "@/mixins/useActivity";
import PointsGoods from "../components/PointsGoods.vue"
import {userIntegralApi} from "../../../api/activity";

export default {
  mixins: [useActivity],
  components: {
    emptyPage,
    NavBar,
    PointsGoods
  },
  data() {
    return {
      urlDomain: this.$Cache.get("imgHost"),
      sysHeight,
      goodList: [],
      navList: [],
      current: 0,
      where: {
        intervalId: 0,
        page: 1,
        limit: 10,
      },
      integralGood: [],
      loadend: false,
      loading: false,
      loadTitle: '加载更多',
      pageScrollStatus: false,
      pointsStyle: pointsStyle, //列表商品样式
      hotPointsStyle: hotPointsStyle //推荐商品样式
    }
  },
  computed: mapGetters(['isLogin']),
  onLoad() {
    this.integralCategory();
    this.getIntegralList();
    if (this.isLogin) {
      this.getStoreIntegral();
      this.getUserIntegral(); //获取我的积分
    } else {
      toLogin();
    }
  },
  watch: {
    isLogin: {
      handler: function (newV, oldV) {
        if (newV == true) {
          this.getStoreIntegral();
          this.getUserIntegral(); //获取我的积分
        }
      },
      deep: true
    },
  },
  onPageScroll(object) {
    if (object.scrollTop > 130) {
      this.pageScrollStatus = true;
    } else if (object.scrollTop < 130) {
      this.pageScrollStatus = false;
    }
    uni.$emit('scroll');
  },
  methods: {
    //区间列表
    integralCategory() {
      integralCategoryApi().then(res => {
        let data = res.data;
        this.navList = data;
      }).catch(err => {
        return this.$util.Tips({
          title: err
        });
      })
    },
    navTap(id, index) {
      if (this.current === index) return;
      this.current = index;
      this.where.intervalId = id;
      this.where.page = 1;
      this.loadend = false;
      this.$set(this, 'integralGood', []);
      this.getIntegralList();
    },
    //积分商品列表
    getIntegralList() {
      if (this.loadend) return;
      if (this.loading) return;
      this.loading = true;
      integralListApi(this.where).then(res => {
        let list = res.data.list;
        let limit = this.where.limit;
        this.where.page++;
        this.loadend = limit > list.length;
        this.integralGood = this.integralGood.concat(list);
        this.loading = false;
        this.loadTitle = loadend ? '没有更多内容啦~' : '加载更多';
      }).catch(err => {
        this.loading = false;
        this.loadTitle = '加载更多';
        return this.$util.Tips({
          title: err
        });
      })
    },
    goarrow() {
      uni.navigateBack()
    },
    //热门推荐
    getStoreIntegral() {
      integralProductHotApi({
        page: 1,
        limit: 20,
      }).then(res => {
        this.goodList = res.data.list;
      })
    },
    // 去商品详情
    goGoodsDetail(item) {
      uni.navigateTo({
        url: `/pages/activity/goods_details/index?id=${item.id}&type=4`
      });
    }
  },
  onReachBottom() {
    this.getIntegralList();
  }
}
</script>

<style lang="scss" scoped>
.points-nav {
  position: relative;
  width: 100%;
  height: 154rpx;
  margin-bottom: 46rpx;
  background: linear-gradient(0deg, #F5F5F5 0%, rgba(255, 255, 255, 0) 100%);
}

page {
  padding-bottom: 40rpx;
}

.accountTitle {
  background: linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%);
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 99;

  .sysTitle {
    width: 100%;
    position: relative;
    font-weight: 500;
    color: #fff;
    font-size: 30rpx;

    .iconfont {
      position: absolute;
      font-size: 36rpx;
      left: 11rpx;
      width: 60rpx;
    }
  }
}

.header {
  width: 100%;
  height: 400rpx;
  background: linear-gradient(90deg, #8B4513 0%, #FF7931 100%);
  position: relative;

  .record {
    width: 124rpx;
    height: 48rpx;
    background-color: rgba(51, 51, 51, 0.2);
    border-radius: 50rpx 0 0 50rpx;
    font-weight: 400;
    color: #FFFFFF;
    font-size: 24rpx;
    position: absolute;
    right: 0;
    top: 36rpx;
  }

  &::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 105rpx;
    background: linear-gradient(180deg, rgba(233, 51, 35, 0) 0%, var(--view-minorColorT) 50%, #F5F5F5 100%);
  }

  .headerBg {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 689rpx;
    height: 298rpx;
    margin: 0 auto;
    padding-top: 88rpx;

    .pictrue {
      width: 345rpx;
      height: 76rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .num {
      font-size: 26rpx;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.6);
      margin: 4rpx 0 0 12rpx;
    }
  }
}

.hot {
  background-color: #fff;
  width: 710rpx;
  margin: 20rpx auto 0 auto;
  padding: 24rpx 0 24rpx 28rpx;

  .title {
    font-weight: 600;
    color: #333333;
    font-size: 32rpx;
  }

  .scroll {
    white-space: nowrap;
    margin-top: 26rpx;

    .scroll-item {
      display: inline-block;
      width: 224rpx;
      margin-right: 20rpx;
      vertical-align: top;

      .pictrue {
        width: 100%;
        height: 224rpx;

        image {
          width: 100%;
          height: 100%;
          border-radius: 20rpx;
        }
      }

      .name {
        font-weight: 400;
        color: #333333;
        font-size: 26rpx;
        margin-top: 16rpx;
      }

      .info {
        color: #999999;
        font-size: 22rpx;
        margin-top: 8rpx;
      }

      .price-box {
        font-size: 24rpx;
        font-weight: 500;
        margin-top: 10rpx;
        color: #666;

        image {
          width: 31rpx;
          height: 31rpx;
          margin-right: 8rpx;
        }
      }
    }
  }
}

.nav {
  width: 710rpx;
  height: 184rpx;
  background-color: #fff;
  margin: -150rpx auto 0 auto;
  position: relative;

  .item {
    font-size: 26rpx;
    font-weight: 400;
    color: #333333;
    text-align: center;
    width: 30%;

    .pictrue {
      width: 61rpx;
      height: 61rpx;
      margin: 0 auto 16rpx auto;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .line {
    width: 1px;
    height: 70rpx;
    background-color: #F3F3F3;
  }
}

.body {
  background-color: #fff;
  width: 710rpx;
  margin: 20rpx auto 0 auto;
  border-radius: 24rpx;
  padding-bottom: 20rpx;
  overflow: hidden;

  .body-title {
    padding-left: 32rpx;
    overflow: auto;

    .scroll {
      white-space: nowrap;

      .item {
        display: inline-block;
        margin-right: 60rpx;
        padding: 34rpx 0 38rpx 0;
        font-size: 28rpx;
        font-weight: 400;

        &.on {
          font-weight: 500;
          color: #8B4513;
          position: relative;
          font-size: 30rpx;

          &::after {
            position: absolute;
            content: '';
            width: 36rpx;
            height: 30rpx;
            border: 2px solid #8B4513;
            border-left: 2px solid transparent !important;
            border-top: 2px solid transparent !important;
            border-right: 2px solid transparent !important;
            border-radius: 50%;
            left: 50%;
            bottom: 22rpx;
            margin-left: -24rpx;
          }
        }
      }
    }
  }

  .product-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 32rpx;
    margin-right: -24px;

  }
}
</style>